-
Notifications
You must be signed in to change notification settings - Fork 9
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add Deck.gl Layers and Utility Support for vue-maplibre-gl #106
base: master
Are you sure you want to change the base?
Conversation
Hi, Thanks for your contribution. This add interesting new features. I don't know if it should be integrated to the default package, as it make the library bigger. This is something to look at. |
Hi, Thanks for the feedback! I’ve addressed the requested changes:
Let me know if there’s anything else you’d like me to adjust! |
Hi, Could rebase your branch against the master branch and not create merge commits? This way we'll clean the history and enable the build check. |
d675b54
to
b478f5a
Compare
Hi, I've rebased my branch against the latest Please let me know if there is anything else you'd like me to do. Thank you for your feedback and guidance! |
Hi, Thanks for the rebase! I tried to run the examples. You may want to add the magic comments at the top of the file to have a title and the description of the example (look at the others ones). Not sure why, but it seems that the deck.gl layers are not correctly binded with maplibre zoom and viewport. Look at the video recording.mp4 |
Hi,
I’ve pushed the changes—please let me know if there’s anything else I should adjust! |
Hi, the examples are still working for me. Did you forget to push a change? |
Hi, To clarify, I only made changes to the ScatterplotLayer example in the file If there’s a specific issue you’re encountering with any of the examples, please let me know, and I’ll be happy to investigate further! |
Hi, I have the same zoom problem with the scatterplot and the 2 other examples. recording.mp4 |
Hi, I’ve worked on the zoom issue and fixed it now in all three examples (ScatterplotLayer, GeojsonLayer, and ArcLayer) in commit The issue was caused by missing styles for MapLibre GL, which led to improper rendering and interaction with the map at certain zoom levels. I’ve now imported the relevant MapLibre GL default styles in all the examples, which resolves the problem. Additionally, I adjusted the map’s height to make the examples more consistent and visually clear. Please let me know if you encounter any further issues with the examples! |
Hi, Much better indeed! |
type Accessor, | ||
type Material, | ||
} from "@deck.gl/core"; | ||
import type { MjolnirEvent } from "mjolnir.js"; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It shouldn't a dependency? Or is it possible to use another type?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
mjolnir.js is an indirect dependency, it is installed as part of the dependency tree of Deck.gl.
see this
e05df98
to
8f8d407
Compare
Hi @francois2metz , I just wanted to follow up on my pull request as I haven’t received any feedback in a while. Please let me know if there are any additional changes needed from my side or if there are concerns about merging the PR. Thank you for your time. |
8f8d407
to
bb3e9a3
Compare
….gl layers - Defined common `baseLayerProps` and layer-specific props (`arcProps`, `geojsonProps`) for Deck.gl layers. - Added type-safe support for interactivity, styling, 3D features, and extensions. - Introduced `genDeckLayerOpts` utility for sanitizing layer configurations.
- Added `useDeckLayer` composable to integrate Deck.gl layers. - Supports `getTooltip` and manages layer lifecycle with Vue's reactivity.
…x integration - Added `@deck.gl/core`, `@deck.gl/layers`, and `@deck.gl/mapbox` dependencies.
- Implemented `MglDeckArcLayer` Vue component using Deck.gl's `ArcLayer`. - Included support for dynamic tooltips, prop validation, and layer configuration.
…tion - Implemented `MglDeckGeojsonLayer` Vue component using Deck.gl's `GeojsonLayer`. - Included support for dynamic tooltips, prop validation, and layer configuration.
Revised the TooltipContent type to support a more flexible structure, allowing text, HTML, className, and style properties. This change enables enhanced customization for tooltips in deck.layer.lib.ts.
Simplify the tooltip initialization by directly assigning a conditional function or undefined. This improves code readability and reduces unnecessary object spread usage.
This change adds '@deck.gl/core', '@deck.gl/layers', and '@deck.gl/mapbox' to the SSR external dependencies in the Vite configuration. It ensures proper handling of these libraries during the build process and avoids bundling them unnecessarily. Additionally, global variables for these dependencies were defined to maintain compatibility.
This commit introduces exports for `MglDeckGeojsonLayer` and `MglDeckArcLayer` from the `deck-layers` directory. This ensures that these layers are available for use in other parts of the application.
Introduce a new example file showcasing the usage of `MglDeckGeojsonLayer` in a Vue component. This includes rendering GeoJSON data with custom properties like elevation, colors, and tooltips, enhancing the documentation's examples.
Add a new example file to demonstrate the use of `MglDeckArcLayer` in Vue. The example outlines the usage of different properties including source color, position and tooltips while rendering JSON data. This enhances the comprehensiveness of our documentation.
Introduced new properties for line and scatterplot layers, enabling more control over their configurations. Consolidated the `getTooltip` property into `baseLayerProps` for improved reusability across layers. Removed redundant `getTooltip` declarations from specific layer props.
Introduced `MglDeckLineLayer` and `MglDeckScatteredPlotLayer` components to support additional deck.gl layer types. Updated the index file to export the new components for seamless integration.
This example demonstrates a Deck.GL scatterplot integration in Vue with gender-specific colors and configurable radius. It provides a visualization of people in Manhattan using sample data.
Corrected the header comment to accurately describe the Geojson layer instead of incorrectly referencing the Arc layer. Ensures the documentation aligns with the file's purpose.
…ple and replace the ScatteredPlot layer example Added the magic comments (title and description) to the top of the example files to make them consistent with the others in the project. Also, I replaced the ScatteredPlot layer example with another one.
Enhances the deck layer component by introducing an `updateTrigger` prop, allowing fine-grained control over layer updates.
Changed map height to 500px and ensured consistent styling across `deck-scatteredplot-layer.vue`, `deck-arc-layer.vue`, and `deck-geojson-layer.vue`. Included the MapLibre GL CSS file to fix missing styles issue.
Updated links in the documentation comments for Deck.gl layers to include more descriptive anchor text (Markdown).
Introduce a new example demonstrating the use of Deck.gl Line and Scattered Plot layers in Vue with MapLibre. The example visualizes flight paths and airports, showcasing dynamic tooltips, custom styling, and interactive features.
Remove unused imports and redundant type definitions, streamline tooltip logic, and destructure initial view state for cleaner syntax.
Introduce the `MglDeckPolygonLayer` component to support Deck.gl's Polygon Layer in the library. The example demonstrates its usage with MapLibre GL, including rendering polygons with tooltip and style customization options.
Updated the import statement to omit the `.ts` file extension for consistency with other imports and potential compatibility improvements. This change ensures adherence to standard conventions in the project.
Introduced `polygonProps` and `polygonPropsKeys` to define and manage properties specific to polygon layers.
Adjusted global export names for Deck.gl modules to align with updated naming conventions. This ensures compatibility and resolves potential issues with external integrations.
The @deck.gl/core, @deck.gl/layers, and @deck.gl/mapbox packages were relocated from devDependencies to peerDependencies. This ensures compatibility management is handled by consumers of the package.
Added peer dependencies for @deck.gl/core, @deck.gl/layers, and @deck.gl/mapbox with version ^9.0.35. This ensures compatibility with the required modules for the project.
Bumped versions for multiple Deck.gl, Loaders.gl, Luma.gl, Math.gl, MJOLNIR.js, and associated peer and dev dependencies in `yarn.lock` and `package.json`. These updates ensure compatibility and align with the latest package improvements.
bb3e9a3
to
b0d43c3
Compare
Summary of Changes
This pull request enhances the package with the following additions:
New Components for Deck.gl Layers:
MglDeckGeojsonLayer
component to integrate Deck.gl'sGeoJsonLayer
(@commit:43bab18a).MglDeckArcLayer
component to integrate Deck.gl'sArcLayer
(@commit:2dba67d3).Core Composable for Layer Management:
useDeckLayer
composable to handle lifecycle and reactivity for Deck.gl layers within Maplibre (@commit:462eb07f).Utility and Prop Configuration:
deck.layer.lib.ts
, which defines common and layer-specific props with utilities for Deck.gl layers, ensuring reusable, type-safe layer configurations (@commit:9503c64c).New Dependencies:
@deck.gl/core
,@deck.gl/layers
,@deck.gl/mapbox
) to the project (package.json
updates) (@commit:b0b75cca).Features
ArcLayer
andGeoJsonLayer
, integrated as reusable Vue components.getTooltip
functionality.Motivation
The goal of these changes is to expand the functionality of the
@indoorequal/vue-maplibre-gl
package by introducing seamless integration with Deck.gl layers. These enhancements bring extended interactivity, 3D visualization, and customization options for applications using the library. The composable and utility-driven design ensures easier implementation and extension of Deck.gl layers within Vue projects.Future Plans
This is just the beginning of integrating Deck.gl into the
@indoorequal/vue-maplibre-gl
package. Over time, the implementation will be extended to include support for all available Deck.gl layers, ensuring the package becomes a comprehensive solution for Deck.gl and Maplibre users. Future layers to be added includeScatterplotLayer
,IconLayer
,BitmapLayer
, and many more.Testing
ArcLayer
andGeoJsonLayer
.